<template>
  <p-modal v-model="visible" :width="1000" :mask-closable="false" title="产品工时调整" @cancel="onCancel" @ok="onOk">
    <p-form class="working-hour-form">
      <p-row :gutter="24">
        <p-col :xl="6">
          <p-form-item label="产品编码">
            <p-input :value="model.productCode" disabled />
          </p-form-item>
        </p-col>
        <p-col :xl="6">
          <p-form-item label="产品名称">
            <p-input :value="model.productCode" disabled />
          </p-form-item>
        </p-col>
        <p-col :xl="6">
          <p-form-item label="工艺路线编码">
            <p-input :value="model.routeCode" disabled />
          </p-form-item>
        </p-col>
        <p-col :xl="6">
          <p-form-item label="版本号">
            <p-input :value="model.version" disabled />
          </p-form-item>
        </p-col>
      </p-row>
    </p-form>
    <p-form class="working-hour-form" layout="inline">
      <p-row :gutter="24">
        <p-col :xl="6">
          <p-form-item label="工序编号">
            <p-input v-model.trim="params.processmcode" placeholder="请输入工序编号" />
          </p-form-item>
        </p-col>
        <p-col :xl="6">
          <p-form-item label="工序名称">
            <p-input v-model.trim="params.processmname" placeholder="请输入工序名称" />
          </p-form-item>
        </p-col>
      </p-row>
    </p-form>
    <div class="working-hours-tree">
      <p-empty v-if="!hours || !hours.length" :image="simpleImage" />
      <p-tree
         v-else
        :tree-data="hours"
        :replace-fields="replaceFields"
        :filter-tree-node="filter"
        :selectable="false"
        default-expand-all
      >
        <template slot="title" slot-scope="item">
          <span>{{ item.processmname }} </span>
          <p-input-number v-if="item.processlayer === 3" v-model="item.dataRef.hour" :min="0" :precision="0" size="small" @change="handleInput(item)" />
          <span v-else>{{ item.hour }}</span>
          <span>S</span>
        </template>
      </p-tree>
    </div>
  </p-modal>
</template>

<script>
import { Empty } from 'poros/ui/lib'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    options: Object
  },
  data() {
    return {
      visible: false,
      replaceFields: {
        title: 'processmname',
        key: 'id'
      },
      hours: [],
      model: {},
      params: {
        processmcode: '',
        processmname: ''
      }
    }
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.initValue()
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },
  methods: {
    initValue() {
      this.visible = this.value
      if (this.value) {
        if (this.options) {
          const { form, data } = this.options
          this.model = form || {}
          this.hours = data || []
        } else {
          this.model = {}
          this.hours = []
        }
      }
    },
    filter(node) {
      const { dataRef } = node
      let { processmname, processmcode } = this.params
      if (processmname || processmcode) {
        processmcode = processmcode.toLowerCase()
        processmname = processmname.toLowerCase()
        return (processmcode && dataRef.processmcode.toLowerCase() === processmcode) || (processmname && dataRef.processmname.toLowerCase().includes(processmname))
      }
      return false
    },
    handleInput(item) {
      const arr = item.pos.split('-')
      if (arr.length === 4) {
        const data = item.dataRef
        const val = data.hour ? parseInt(data.hour) : 0
        if (isNaN(val)) {
          val = 0
        }
        data.hour = val
        const first = this.hours[arr[1] * 1]
        const second = first.children[arr[2] * 1]
        this.calcHour(second)
        this.calcHour(first)
      }
    },
    calcHour(data) {
      let hour = 0
      data.children.forEach(item => {
        hour += item.hour
      })
      data.hour = hour
    },
    onCancel() {
      this.visible = false
      this.hours = []
      this.params.processmcode = ''
      this.params.processmname = ''
    },
    onOk() {
      this.$emit('callback', JSON.parse(JSON.stringify(this.hours)), 'workingHour')
      this.onCancel()
    }
  }
}
</script>

<style lang="less">
.working-hour {
  &-form {
    .poros-form-item {
      display: flex;
      width: 100%;
      margin-right: 0;
    }
  }
}
</style>